/**
 * create by young (young2f@outlook.com) on 2020/9/12
 */

'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {Button, Card, Col, DatePicker, Form, Popconfirm, Row, Select, Statistic, Table} from 'antd';
import styles from '../../index.less';
import ViewTitle from '../../../components/ViewTitle';
import FormBase from '../../../components/Base/FormBase';
import notify from "../../../components/NotificationExtra";
import {ModalView} from 'antd-extra';
import moment from 'moment';
import 'moment/locale/zh-cn';
import ModalPaymentRecordDetail from "../modal/ModalPaymentRecordDetail";
import ModalReceiptRecordDetail from "../modal/ModalReceiptRecordDetail";

moment.locale('zh-cn');
const {RangePicker} = DatePicker;
const _ = require('lodash');

const {Option} = Select;
@Form.create()
@connect(({
            user,
            global,
            dynamicLabel,
            procure,
            finance
          }) => ({...user, ...global, ...procure, ...finance, ...dynamicLabel}))
export default class PaymentAssess extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }
  paymentCols = (type) => {
    const temp = [{title: '账号名称', dataIndex: '_accountName', key: '_accountName'},
      {title: '开户行', dataIndex: 'openingBank', key: 'openingBank'},
      {title: '账号', dataIndex: 'account', key: 'account'},
      {
        title: '日期', dataIndex: 'date', key: 'date', render: value => {
          return <div>{moment(value).format('YYYY-MM-DD')}</div>;
        }
      },
      {title: `${type}条目`, dataIndex: 'treeName', key: 'treeName'},
      {
        title: `${type}金额`, dataIndex: 'paymentAmount', key: 'paymentAmount', render: (value, record) => {
          const v = type === '付款' ? value : record.receiptAmount;
          return <div>{v}</div>;
        }
      }
    ];

    if (type === '付款') temp.push({title: '审核状态', dataIndex: 'reviewStatus', key: 'reviewStatus'});
    temp.push({title: '是否结单', dataIndex: 'isEnd', key: 'isEnd'});

    temp.push(
      {
        title: '操作', dataIndex: 'operation', key: 'operation',
        width: 140, fixed: 'right',
        render: (value, values) => {
          const model =(type === '付款')? this.props[`PaymentModel`]:this.props[`ReceiptModel`];
          const modal =(type === '付款')? ModalPaymentRecordDetail:ModalReceiptRecordDetail;
          return (
            <span>
                   {<a style={{marginRight: '6px'}}
                       onClick={() => {
                         ModalView.open(modal, {
                           title: "详情",
                           width: '1080px'
                         }, {
                           values,model,
                           callback: () => {
                           }
                         });
                       }}>详情</a>}

            </span>
          );
        }
      });
    return temp;
  };
  render() {

    const {accounts = [], financeAssess = {}, form} = this.props;

    const {

      paymentTotal = 0,
      paymentNoReview = 0,
      paymentReview = 0,

      paymentList = []
    } = financeAssess;

    return <div>
      <div style={{background: '#ECECEC', padding: '30px'}}>
        <Row gutter={16}>
          <Col span={6}>
            <Card>
              <Statistic
                title="付款总金额"
                value={paymentTotal}
                precision={2}
                valueStyle={{color: '#11f'}}
                suffix="元"
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="待审核付款总金额"
                value={paymentNoReview}
                precision={2}
                valueStyle={{color: '#11f'}}
                suffix="元"
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="已审核付款总金额"
                value={paymentReview}
                precision={2}
                valueStyle={{color: '#11f'}}
                suffix="元"
              />
            </Card>
          </Col>

        </Row>
      </div>
      <ViewTitle
        title={'应付款列表'}
      ></ViewTitle>
      <Table
        className={styles.antTable}
        bordered={true}
        columns={this.paymentCols('付款')}
        dataSource={paymentList}
        scroll={{x: true}}
        pagination={true}
        //scroll={{ x: 1300 }}
      ></Table>

    </div>;
  }
}
